<template>
        <div class="person">
            <div class="actorList">
                <img  :src="avatar" alt="">
                <div class="actorName">{{ name }}</div>
            </div>
        </div>
</template>

<script>
    export default {
        //声明自定义属性,用于接收父组件传来的参数
        // 父组件 <person name="zj" avatar="1.jpg"> 参数对应传递
        // props:['name','avatar'],
        props:{
            name:{
                type:String,    // 设置属性类型
                required:true  //这个代表必须要设置的
            },
            avatar:{
                type:String,    // 设置属性类型
                required:true  //这个代表必须要设置的
            }
        }
    }
</script>

<style lang="scss" scoped>
    .actorList{
        height: 160px;
        margin: 15px 10px;
        display: flex;
        flex-direction: column;
        .actorName{
            width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        img{
            width: 100px;
            display: flex;
        }
    }
</style>